<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<style type="text/css">
			table {
				margin-top: 5px;
			}
		</style>
	</head>
	<body>
		<div id="app" class="container-fluid">
			<form>
				<div class="form-group">
					<label>名称</label>
					<input type="text" class="form-control" v-model="name" placeholder="名称">
				</div>
				<div class="form-group">
					<label>价格</label>
					<input type="text" class="form-control" v-model="price" placeholder="价格">
				</div>
				<button type="submit" class="btn btn-default" @click.prevent="save">保存</button>
				<button type="submit" class="btn btn-success" @click.prevent="query">查询</button>
			</form>
			<clist :cs="course" @dd="del"></clist>
		</div>
		<template id="c">
			<table class="table table-bordered">
				<tr class=".active">
					<th>ID</th>
					<th>名称</th>
					<th>价格</th>
					<th>操作</th>
				</tr>
				<tr v-for="(c,index) in cs">
					<td>{{c.id}}</td>
					<td>{{c.name}}</td>
					<td>{{c.price}}</td>
					<td><button type="button" class="btn btn-primary btn-xs edit">修改</button>
						<button type="button" class="btn btn-default btn-xs del" @click="del(c.id,index)">删除</button>
					</td>
				</tr>
			</table>
		</template>
		<script type="text/javascript">
			Vue.component('clist', {
				template: '#c',
				props: ['cs'],
				methods: {
					del(id, index) {
						this.$emit('dd', id, index)
					}
				}
			})
			new Vue({
				el: '#app',
				data: {
					name: '',
					price: 0,
					course: [{
						"id": 7749,
						"name": "html",
						"price": "999"
					}, {
						"id": 6301,
						"name": "js",
						"price": "555"
					}, {
						"id": 9427,
						"name": "jquery",
						"price": "1000"
					}, {
						"id": 1899,
						"name": "css",
						"price": "111"
					}]
				},
				methods: {
					save() {
						let c = {
							id: Math.ceil(Math.random() * 10000),
							name: this.name,
							price: this.price
						}
						this.course.unshift(c);
					},
					del(id, index) {
						this.course.splice(index, 1);
					},
					query() {
						const arr = this.course.filter(val => {
							return val.name.includes(this.name)
						});
						this.course = arr;
					}
				},
			})
		</script>
	</body>
</html>
